<template>
  <div class="niaojiansecond">

    <div class="aui-bar aui-bar-nav aui-barPailuan">
      <!--<a class="aui-pull-left aui-padded-l-15 icon iconfont icon-fanhuijiantou1 " style="color:#0075f0 !important;" @click="goBack()">-->
      <!--<div style="color: black;margin-left: 1rem">排卵</div>-->
      <!--</a>-->
      <a class="aui-pull-left">
        <img style="width: 2.5rem;;" src="../../../../static/img/back-b.png" alt=""  @click="goBack()">
        <div >
        <span style="margin-top:-0.85rem;left:4.5rem;position: absolute;color: black; font-size: 18px;	font-family: 'Helvetica Neue', Helvetica, sans-serif;">
              尿检
            </span>
        </div>
      </a>
    </div>
    <section class="sectionMagin">
      <div class="ConnectStatus" v-if="ConnectStatus==false"> 正在连接中 </div>
      <div class="textColor" style="position:relative">
        <div class="step1">
          <div class=" order">3</div>
          <div class="stepImg3">
            <img src="../img/niaojian3.png" alt="">
          </div>

        </div>
      </div>
      <div class="clearfloat"></div>

      <div class="bHint bottomBtn" >
        <div class="aui-font-size-12 aui-text-center aui-margin-b-10 textColor">检测槽正在打开，请将试纸放入检测槽中。</div>
        <div @click="goPath('/niaojianthird')" class="aui-btn SubBtnNiaoJianSecond">下一步</div>
      </div>
    </section>
    <JianCeConnect v-if="JianCeConnect"></JianCeConnect>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import Loading from '../../common/Loading'
  import JianCeConnect from '../../common/JianCeConnect'

  export default {
    name: 'NiaoJianSecond',
    data () {
      return {
        exitTime:0,
        JianCeConnect:false
      }
    },
    computed: {
      ...mapState([
        'ConnectStatus',
        'JianCeConnect'
      ])
    },
    components: {
      Loading,
      JianCeConnect
    },
    created () {
      window.hilink.setTitleVisible(false)
    },
    methods: {
      ...mapMutations([ 'STARTYJ','OPNCLOSS'
      ]),
      goBack(){
        if(this.ConnectStatus==false){
          this.JianCeConnect = true
          return
        }
        clearTimeout(window.niaojiansetTimeOUTn);
        this.OPNCLOSS()
        this.$router.go(-1)
      },
      goPath(pth){
        if(this.ConnectStatus==false){
          this.JianCeConnect = true
          return
        }
        this.$router.replace({path:pth})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  /*@media screen and (max-width:320px){*/
  /*body{font-size: 12px;}*/
  /*.order{padding-top:0.1rem; padding-right: 0.1rem;}*/
  /*.stepImg2 img{height:5rem}*/
  /*}*/
  /*@media screen and (min-width:321px) and (max-width:376px){*/
  /*body{font-size: 14px;}*/
  /*}*/
  /*@media screen and (min-width:377px) and (max-width:415px){*/
  /*body{font-size: 16px;}*/
  /*.order{padding-right: 0.1rem;}*/
  /*}*/
  .headerDiv{
    height: 2rem;
    width: 100%;
    /*background-color: #288af0;*/
  }
  body{background: #fff !important;}
  .aui-barPailuan{
    border-bottom: 2px solid #e2e2e2;
    background: #ffffff;

  }
  .aui-bar a{
    color:#000;
    font-size: 20px!important;
    font-weight: bold!important;
  }
  /*.step1{*/
  /*width:100%;*/
  /*!*position:relative;*!*/
  /*}*/
  .heartImg1{  /*心率图片设置*/
    display: block;
    width:70%;
    margin:2rem auto;
    /*margin-top:2rem;*/
  }
  .order{
    margin-top:3.25rem;
    margin-left:2rem;
    width:1.5rem;
    height:1.5rem;
    border-radius: 1rem;
    font-size: 1rem;
    background: #008fd9;
    text-align: center;
    color:#fff;
    position: absolute;
  }
  .method{
    width:80%;
    margin:auto;
  }
  .stepImg2 img{height:10rem;margin:auto}
  .stepImg3 img{width:80%;margin:auto;padding-top:11rem}
  .yunQistep2 img{height:8rem;margin:auto}

  .niaoJian4{
    width:100%;
    height:18rem;
    position: relative;
  }
  .niaoJian4 img{display:block;width:2.5rem;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto}
  .niaoJian4 .public{
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-25%;
    margin-left:-25%;
    z-index: 999;
  }
  .niaoJian4 .publicItem{
    width:30%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-15%;
    margin-left:-15%;
    z-index: 999;
  }
  .niaoJian4 .outer_1{top:-70%}
  .niaoJian4 .outer_2{bottom:-70%}
  .niaoJian4 .outer_3{left:-70%}
  .niaoJian4 .outer_4{right:-70%}
  .niaoJian4 .outer_5{top:-50%;right:-50%}
  .niaoJian4 .outer_6{top:-50%;left:-50%}
  .niaoJian4 .outer_7{bottom:-50%;right:-50%}
  .niaoJian4 .outer_8{bottom:-50%;left:-50%}

  /*是否怀孕样式*/
  .verify img{width:80%;margin:auto}
  .weiHuaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;right:0}
  .huaiYun img{width:70%;position: absolute;top:50%;margin-top:-35%;left:0}


  /*排卵*/
  .ovulation{position: absolute;top:50%;margin-top:-25%;left:50%;margin-left:-25%}



  .borStyle{
    width:90%;
    border:1px solid #ccc;
    margin:0 5%;
  }
  .bHint{
    width:100%;
    margin-top: 10rem;
    /*position: absolute;*/
    /*bottom:1rem;*/
  }
  .SubBtnNiaoJianSecond{
    width: 90%;
    height: 3rem!important;
    line-height: 3rem!important;
    margin: 0 5%!important;
    color: #0075f0;
    font-size: 1.2rem!important;
    border: 1px solid #eee;
    border-radius: 1.5rem!important;
    background: #f7f7f7!important;
  }
  .step2{
    width:100%;
  }


  /*可视心率showHeart1页面的样式*/
  .heartStep{
    padding-left:1.5rem;
  }
  .radioStyle{
    display: inline-block;
    width:1rem;
    height:1rem;
    background: #008fd9;
    color: #fff;
    border-radius: 1rem;
    text-align: center;
  }
  /*可视心率showHeart2页面的样式*/
  .heart2{/*可视心率showHeart2图片位置*/
    height:12rem;
    width:100%;
    margin-top:2rem;
  }
  .heart2 img{margin:auto}

  .audio{
    display: block;
    width:4rem;
    margin:auto;
    margin-top:-3rem;
  }
  .heartData{
    border-right:1px solid #ccc;
  }


  .textColor{
    color:#ccc;
  }
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
  .ConnectStatus{
    text-align: center;
    color: red;
  }
  .aui-bar{
    padding-top: 25px !important;
    padding-left: 10px !important;
    padding-bottom: 5px !important;
  }
  .aui-bar a{
    padding: 0 !important;
    /*padding-bottom: 1px !important;*/
    /*padding-left: 30px !important;*/
    /*padding-right: 30px !important;*/

  }
</style>
